/*
 * @Title: 景区 立即预定
 * @Created by: ycq
 */
<template>
	<view  class="order">
		<view v-if="showMask" class="mask" @click="closeMask()"></view>
		<view  class="order-body">
			<IndexHead :config='pageConfig'></IndexHead>
			<view class="order-head">
				<text class="order-spot-name">{{spot}}</text>
				<view class="spot-info">
					<view style="width: 100%;height: auto;display: table;">
						<image class="spot-img" src="/static/myPic/binguan.png" mode=""></image>
						<view class="order-right">
							<view class="item-title"  @click="showRoomDetail">
								<text class="title-text">冰峪度假村成人票</text>
								<!-- <image src="/static/jiantou.png" mode=""></image> -->
							</view>
							<view class="title-mile">
								<text>距离您{{mile}}km</text>
							</view>
							<view class="title-payover">
								<text>已售{{numover}}</text>
							</view>
							<!-- <view class="item-area">
								<text class="info-price">计：￥{{sum_price}}</text>
								<view class="number">
									<view class="minus" :class="goodsNum<2?'amUnable':''" @click="minusNum">-</view>
									<view class="num">{{goodsNum}}</view>
									<view class="add" @click="addNum">+</view>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 订单中上部 -->
			<view class="order-midOn">
				<view class="midOn-choose">选择时间</view>
				<view class="line"></view>
				<scroll-view  class="date-area" scroll-x="true" @scroll="scroll" scroll-left="0">
					<view class="date-item" :class="dateIndex==index?'date-ac':''" v-for="(item,index) in dateData" :key='index' @click="chooseDate(index)">
						<text class="date-time">{{item.date}}</text>
						<text class="date-price">{{item.price}}</text>
						<!-- <text class="date-ding">{{item.ding}}</text>
						<text class="date-data">{{item.data}}</text>
						<image class="date-img" :src="item.img"></image> -->
					</view>
					<!-- <view class="more">
						<text>更多</text>
						<text>日期</text>
						<image src="../../../static/jiantou.png" mode=""></image>
					</view> -->
				</scroll-view >
				<!-- <view class="date-more" @click="moreDate">更<br>多</view> -->
			</view>
			<!-- 订单中下部 -->
			<view class="order-midUp">
				<view class="ticket">
					<text class="ticket-man">成人票</text>
					<text class="ticket-money">￥{{ticMoney}}</text>
				</view>
				<view class="gmxz">
					<view class="gmxz-buy" @click="showTicketDetail()">
						<text>购买须知</text>
						<image src="../../../static/jiantou.png" mode=""></image>
					</view>
					<view class="jj">
						<image v-if='num1>1' src="/static/shop/cjian.png" mode="" @click="minusNumB(1)"></image>
						<image v-if='num1<2' src="/static/shop/jian.png" mode=""></image>
						<text>{{num1}}</text>
						<image src="/static/shop/jia.png" mode="" @click="addNumB(1)"></image>
					</view>
				</view>
				<view class="line"></view>
				<view class="trip">
					<view class="trip-man">出行人信息</view>
					<view class="trip-must">需填写{{num1}}个出行人</view>
				</view>
				<view class="cxr-list">
					<navigator url="/pages/common/renyuanId" class="trip-add">
						新增
					</navigator>
					<view class="cxr-item">
						张蕾
					</view>
				</view>
				<view class="line"></view>
				<!-- <view class="order-info-line">
					<text class="order-label">出行人</text>
					<input type="text" v-model="name" placeholder="点击添加联系人" placeholder-style="color:#999999;" class="order-input">
					<image src="../../../static/myPic/bianJiBi.png" mode=""></image>
				</view> -->
				<!-- <view class="order-info-line" :style="{height:num1*100+'upx' }">
					<text class="order-label" :style="{height:num1*100+'upx','line-height':num1*100+'upx' }">出行人</text>
					<view class="renyuan-list" :style="{height:num1*100+'upx' }">
						<view class="renyuan-item" style="color:rgba(51,51,51,1.00)" v-if="renyuanData[index]!=null" v-for="(item,index) in num1" :key='index'>{{renyuanData[index]}}</view>
						<view class="renyuan-item" v-if="renyuanData[index]==null" v-for="(item,index) in num1" :key='index'>出行人{{index+1}}，添加出行人姓名</view>
						
					</view>
					<image class="txl" :style="{'margin-top':(num1*100-30)/2+'upx' }" src="/static/renyuan.png" mode=""></image>
				</view> -->
				<view class="order-info-line" :style="{height:peopleData.length*220+(num1-peopleData.length)*100+'upx' }"  >
					<text class="order-label" :style="{height:peopleData.length*220+(num1-peopleData.length)*100+'upx','line-height':peopleData.length*220+(num1-peopleData.length)*100+'upx' }">出行人</text>
					<view class="renyuan-list" :style="{height:peopleData.length*220+(num1-peopleData.length)*100+'upx' }">
						<view class="renyuan-item-id" style="color:rgba(51,51,51,1.00)" v-if="peopleData[index]!=null" v-for="(item,index) in num1" :key='index'>
							<text class="renyuan-name-id">{{peopleData[index].name}}</text>
							<text class="renyuan-info-id" v-if="peopleData[index].phone!=''||peopleData[index].cardId!=''">{{peopleData[index].phone}}</text>
							<text class="renyuan-info-id" v-if="peopleData[index].phone!=''||peopleData[index].cardId!=''">{{peopleData[index].cardId}}</text>
							<text class="renyuan-tip-id" v-if="peopleData[index].phone==''||peopleData[index].cardId==''">信息不全，请补全信息</text>
							<image @click="toRenyuan" class="txl" style="padding: 30upx;margin-right: -15upx;float: right;margin-top: 0;"  src="/static/renyuan.png" mode=""></image>
						</view>
						<view class="renyuan-item" style="height: 100upx;" v-if="peopleData[index]==null" v-for="(item,index) in num1" :key='index' @click="toRenyuan">
							<text class="warning" style="margin-left: 0;">请填写信息</text>
							<text>出行人{{index+1}}，每件需填1个出行人</text>
							<image  class="txl" style="padding: 30upx;margin-right: -15upx;float: right;margin-top: 0;"  src="/static/renyuan.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 订单下部 -->
			<view class="contact">
				<view class="order-info-lines">
					<text class="order-labels">联系信息</text>
				</view>
				<view class="line"></view>
				<view class="order-info-lines">
					<text class="order-labels">联系方式</text>
					<input type="text" v-model="name" placeholder="接收确认信息" placeholder-style="color:#999999;" class="order-inputs">
					<image src="../../../static/address-book.png" mode=""></image>
				</view>
			</view>					
		</view>
		<!-- <view class="order-info">
			<view class="order-info-line">
				<text class="order-label">姓名</text>
				<input type="text" placeholder="请填写姓名" placeholder-style="color:#999999;" class="order-input">
			</view>
			<view class="order-info-line">
				<text class="order-label">联系方式</text>
				<input type="text" placeholder="请填写联系方式" placeholder-style="color:#999999;" class="order-input">
			</view>
			<view class="order-info-line">
				<text class="order-label">身份证号</text>
				<input type="text" placeholder="请填写身份证号" placeholder-style="color:#999999;" class="order-input">
			</view>
			
			<view class="order-info-line nop">
				<text class="order-label">出行人数</text>
				<view class="nop-list">
					<view class="nop-item">
						<text class="ptype">成人</text>
						<view class="jj">
							<image v-if='num1>0' src="/static/shop/cjian.png" mode="" @click="minusNumB(1)"></image>
							<image v-if='num1<1' src="/static/shop/jian.png" mode=""></image>
							<text>{{num1}}</text>
							<image src="/static/shop/jia.png" mode="" @click="addNumB(1)"></image>
						</view>
					</view>
					<view class="nop-item">
						<text class="ptype">儿童 <text  class="ptip">(不含2-10周岁)</text></text>
						<view class="jj">
							<image v-if='num2>0' src="/static/shop/cjian.png" mode="" @click="minusNumB(2)"></image>
							<image v-if='num2<1' src="/static/shop/jian.png" mode=""></image>
							<text>{{num2}}</text>
							<image src="/static/shop/jia.png" mode="" @click="addNumB(2)"></image>
						</view>
					</view>
				</view>
			</view>
			
			
		</view> -->
		<view class="order-bottom">
			<!-- <view class="btn" @click="pay">下一步</view> -->
			<view class="btn" @click="pay">立即支付</view>
			<view class="btn2"  v-if="!addedXc" @click="payXc">加入行程<br>暂不支付</view>
			<view class="btn2" style="line-height: 98upx;padding: 0;height: 98upx;" v-if="addedXc" >已加入行程</view>
			<text class="sum">共计：</text>
			<text class="price">￥{{sum_price}}</text>
			
		</view>
		<view v-if="ifAdd" class="if-add-xc">
			<text>是否添加到“我的行程”中</text>
			<view class="add-xc-bottom">
				<view class="add-quxiao" @click="quxiaoXc">取消</view>
				<view class="add-add" @click="payXc">添加</view>
			</view>
		</view>
		<pay-view v-if='toPay'  pageId='spot'></pay-view>
		<PaySuccess v-if='paySucc' :payData='payData'></PaySuccess>
		<xing-cheng v-if='showXc'/>
		<Ticket v-if="showTicket"></Ticket>
		<!-- <Collection v-if='showColl' /> -->
	</view>
</template>

<script>
	import PaySuccess from '@/components/PaySuccess.vue'
	import Comment from '@/components/Comment.vue'
	import Ticket from	'@/components/ticketDetail.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		data(){
			return{
				dateIndex:0,
				showXc:false,
				ifAdd:false,
				toPay:false,
				paySucc:false,
				addedXc:false,
				showMask:false,
				name:'',
				xcId:null,
				goodsNum:1,
				spot:'冰浴谷度假村',
				money:698,
				num1:1,
				renyuanData:['张蕾'],
				price1:50,
				num2:1,
				price2:30,
				time: '12:01',
				mile:'2',
				numover:'2549',
				ticMoney:'50',
				more:'更多',
				showTicket:false,
				data:'日期',
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:false, //显示页面title
						hasMenu:false,
						maxHead:true,
						pageId:'',
					},
					left:{
						showBack:true,
						img:'' , //左侧图标
						text:'', //左侧文字
					},
					mid:{
						title:'' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
				},
				peopleData:[
					{
						name:'任雪',
						cardId:'213***********213',
						phone:'156****2134'
					},
					// {
					// 	name:'张蕾',
					// 	cardId:'',
					// 	phone:''
					// }
				],
				dateData:[
					{
						date:'今天11-13',
						price:'￥50'
					},
					{
						date:'明天11-14',
						price:'￥50'
					},
					{
						date:'后天11-15',
						price:'￥50'
					},
					{
						date:'周六11-16',
						price:'￥50'
					},
					{
						date:'周日11-17',
						price:'不可定'
					},
					{
						date:'11-18',
						price:'￥50'
					},
					{
						date:'11-19',
						price:'￥50'
					},
					{
						date:'11-20',
						price:'￥50'
					},
					
				],
			}
		},methods:{
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			chooseDate(index){
				this.dateIndex = index
			},
			moreDate(){
				uni.navigateTo({
					url:'crewDate'
				})
			},
			addNum(){
				this.goodsNum++
			},
			minusNum(){
				if(this.goodsNum>1){
					this.goodsNum--
				}
			},
			addNumB(type){
				if(type==1){
					this.num1 ++
				}else if(type==2){
					this.num2 ++
				}
			},
			minusNumB(type){
				if(type==1){
					if(this.num1>0){
						this.num1--
					}
				}else if(type==2){
					if(this.num2>0){
						this.num2--
					}
				}
			},
			toRenyuan(){
				uni.navigateTo({
					url:'/pages/common/renyuanId'
				})
			},
			payXc(){
				if(this.xcId!=null){
					this.$store.state.tabInd = 3
					uni.navigateTo({
						url:'../../gonglue/glTabbar'
					})
				}else{
					this.showXc = true
				}
			},
			closeXc(){
				this.showXc=false
				uni.navigateTo({
					url:'spotDetail'
				})
				document.body.style.overflow = 'scroll'
			},
			addXc(){
				// this.$store.state.tabInd = 3
				// uni.navigateTo({
				// 	url:'../../gonglue/glTabbar'
				// })
				this.showXc=false
				this.ifAdd =false
				this.showMask = false
				this.addedXc = true
				document.body.style.overflow = 'scroll'
			},
			quxiaoXc(){
				uni.navigateBack({
					delta:1
				})
			},
			pay(){
				this.toPay = true
				this.showMask = true
				document.body.style.overflow = 'hidden'
			},
			exitPay(){
				this.toPay = false
				this.showMask= false
				document.body.style.overflow = 'scroll'
			},
			paySuccess(data){
				data.hotel = this.hotel
				this.payData = data
				this.toPay = false;
				this.paySucc = true;
			},
			closeBox(){
				this.paySucc = false;
				
				if(this.xcId!=null){
					this.$store.state.tabInd = 3
					uni.navigateTo({
						url:'../../gonglue/glTabbar'
					})
				}else{
					this.ifAdd = true
					// this.showMask= false
				}
			},
			toOrderByXc(){
				this.xcId =1
				this.showXc = false
			},
			closeMask(){
				this.exitPay()
			},
			showTicketDetail(){
				this.showTicket = true
				
			},
			closeTicket(){
				this.showTicket = false
				document.body.style.overflow = 'scroll'
			},
		},
		computed: {
			'sum_price': function () {
				this.settlePrice = 0;
				this.settlePrice = this.num1*this.price1;
			  return this.settlePrice
			},
			
		},
		onLoad(options) {
			if(options!=null){
				if(options.xcId!=null){
					this.xcId = options.xcId
				}
			}
			console.log(options)
		 },
		 components: {
		 	PaySuccess,
			Comment,
			Ticket,
			uniPopup
		 },
	}
</script>

<style scoped>
	.order{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.order-body{
		width: 750upx;
		height: auto;
		position: relative;
	}
	.mask{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: fixed;
		z-index: 25;
	}
	.order-head{
		width: 750upx;
		height: 400upx;
		position: absolute;
		top:150upx;
		/* background: #007AFF; */
	}
	.item-area{
		width: 100%;
		height: 150upx;
	}
	.info-price{
		color: #E25115;
		font-size: 32upx;
	}
	.warning{
		font-size: 24upx;
		position: absolute;
		margin-left: 170upx;
		margin-top: 40upx;
		color: rgba(221,58,8,1.00);
	}
	.cxr-list{
		width: 100%;
		height: 70upx;
		margin-top: 60upx;
		display: flex;
		flex-wrap: wrap;
	}
	.cxr-item{
		width: 150upx;
		height: 68upx;
		border-radius: 10upx;
		background: #6097FE;
		text-align: center;
		line-height: 68upx;
		font-size: 26upx;
		color: #FFFFFF;
		margin-left: 20upx;
	}
	.order-spot-name{
		margin-left: 65upx;
		color: #FFFFFF;
		font-size: 38upx;
		font-weight: Regular;
		font-family: Microsoft YaHei Regular;
	}
	.spot-info{
		width: 677upx;
		height: 248upx;
		border-radius: 20upx;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		margin-top: 20upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	
	.spot-img{
		width: 270upx;
		height: 193upx;
		margin-left: 25upx;
		margin-top: 28upx;
		float: left;
		border-radius: 10upx;
	}
	
	.order-right{
		width: 320upx;
		height: 182upx;
		float: right;
		margin-right: 30upx;
		margin-top: 28upx;
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
	}
	.title-text{
		font-size: 34upx;
		float: left;
	}
	.title-mile text{
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color:#999999;
		padding: 20upx 0;
	}
	.title-payover text{
		font-size: 20upx;
		font-family: PingFang SC Regular;
		color: rgba(171,171,171,1);
	}
	
	/*订单中上部*/
	.order-midOn{
		width: 677upx;
		height: 230upx;
		border-radius: 20upx;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		margin-top: 130upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.midOn-choose{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(0,0,0,1);
		padding: 25upx 27upx;
	}
	.order-midOn .line{
		width: 700upx;
		height: 1upx;
		background: rgba(246,246,246,1);
		margin-bottom: 28upx;
	}
	.date-area{
		white-space: nowrap;
		height: 88upx;
		width: 650upx;
		margin-left: 20upx;
		display: flex;
		float: left;
		flex-direction: row;
		
	}
	.date-item{
		display: inline-block;
		width: 142upx;
		height: 76upx;
		border: #B2DCFF solid 1px;
		margin: 2upx 8upx;
		border-radius: 10upx;
	}
	.date-ac{
		border: #54B1FF solid 1px;
	}
	.date-time{
		width: 142upx;
		display: block;
		text-align: center;
		font-size: 20upx;
		color: #2C95F4;
	}
	/* .more{
		width: 142upx;
		text-align: center;
		font-size: 20upx;
		color: #2C95F4;
	} */
	.date-price{
		width: 142upx;
		display: block;
		text-align: center;
		font-size: 24upx;
		color: #E25115;
	}
	.date-ding{
		width: 142upx;
		display: block;
		text-align: center;
		font-size: 20upx;
		color: #999999;
	}
	.date-more{
		width: 142upx;
		display: block;
		text-align: center;
		font-size: 20upx;
		color: #2C95F4;
	}
	.date-data{
		width: 142upx;
		display: block;
		text-align: center;
		font-size: 20upx;
		color: #2C95F4;
	}
	
	/*订单中下部*/
	.order-midUp{
		width: 677upx;
		height: 100%;
		border-radius: 20upx;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		margin-top: 20upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.order-midUp .ticket{
		display: flex;
		flex-direction: row;/*控制方向 --*/
		justify-content: space-between; /*对齐方式*/
		align-items: center;/*行高*/
	}
	.ticket-man{
		margin-left: 42upx;
		margin-top: 35upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
	}
	.ticket-money{
		margin-right: 26upx;
		margin-top: 32upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(252,161,84,1);
	}
	.gmxz{
		display: flex;
		flex-direction: row;/*控制方向 --*/
		justify-content: space-between; /*对齐方式*/
		align-items: center;/*行高*/
	}
	.gmxz-buy{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.gmxz-buy text{
		margin-left: 44upx;
		margin-top: 19upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(85,167,255,1);
	}
	.gmxz-buy image{
		width: 18upx;
		height: 18upx;
		color: #55A7FF;
		margin-left: 9upx;
		margin-top: 17upx;
	}
	.order-midUp .line{
		width: 649upx;
		height: 1upx;
		background: #F6F6F6;
		margin-left: 21upx;
		margin-top: 34upx;
		margin-bottom: 28upx;
	}
	.trip{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.trip-man{
		font-size: 32upx;
		margin-left: 45upx;
		line-height: 40upx;
	}
	.trip-must{
		font-size: 26upx;
		margin-left: 30upx;
		line-height: 46upx;
	}
	.trip-add{
		width: 155upx;
		height: 68upx;
		background: rgba(255,255,255,1);
		border-radius: 10upx;
		margin-left: 43upx;
		line-height: 68upx;
		text-align: center;
		font-size: 26upx;
		align-items: center;
		border: 1upx solid #0184F6;
	}
	/* .trip-add text{
		margin-left: 16upx;
		margin-top: 24upx;
		margin-bottom: 23upx;
		font-size: 22upx;
		font-family: PingFang SC Regular;
		color: rgba(0,130,242,1);
	} */
	.trip-add image{
		width: 18upx;
		height: 20upx;
		color: rgba(85,167,255,1);
		margin-left: 11upx;
	}
	/* .order-info-line{
		margin-top: 34upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.order-label{
		font-size: 30upx;
		/* padding-top: 22upx; */
		/* margin-left: 30upx; */
	/* } */
	/* .order-input{
		font-size: 28upx; */
		/* padding-top: 22upx; */
		/* margin-left: 80upx; */
	/* } */
	
	
	/*订单下部*/
	.contact{
		width: 677upx;
		height: 210upx;
		border-radius: 20upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 150upx;
		background: #FFFFFF;
		margin-top: 20upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.order-info-lines{
		width: 614upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 34upx;
		margin-left: 44upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		margin-bottom: 35upx;
	}
	.order-labels{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 28upx;
		height: 50upx;
		margin-top: 36upx;
		padding-top: 2upx;
	}
	.order-inputs{
		height: 50upx;
		width: 400upx;
		margin-top: 36upx;
		font-size: 26upx;
		margin-left: 65upx;
	}
	.order-info-lines image{
		width: 29upx;
		height: 29upx;
		margin-right: 33upx;
		margin-top: 53upx;
		
	}
	/*之前的样式代码*/
	.order-right image{
		width: 20upx;
		height: 23upx;
		float: right;
		margin-top: 12upx;
		font-size: 21upx;
		color: #666666;
	}
	
	.order-info{
		width: 677upx;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
		margin-bottom: 140upx;
		/* background: #0075EE; */
	}
	
	.order-info-line{
		width: 614upx;
		margin-left: auto;
		margin-right: auto;
		margin-left: 44upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		margin-bottom: 35upx;
	}
	.order-label{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 28upx;
		height: 50upx;
		padding-top: 2upx;
	}
	.order-input{
		height: 50upx;
		width: 400upx;
		font-size: 26upx;
		margin-left: 65upx;
	}
	.order-info-line image{
		width: 29upx;
		height: 29upx;
		margin-right: 33upx;
		margin-top: 17upx;
		
	}
	.nop{
		margin-top: 80upx;
		height: auto;
		display: block;
	}
	.nop .order-label{
		font-size: 32upx;
	}
	.nop-list{
		width: 614upx;
		height: auto;
	}
	.nop-item{
		width: 614upx;
		height: 60upx;
		margin-top: 20upx;
	}
	.ptype{
		font-size: 30upx;
		float: left;
		color: #333333;
		margin-left: 40upx;
		line-height: 60upx;
	}
	.ptip{
		font-size: 24upx !important;
		margin-left: 20upx;
		color: #999999;
	}
	.jj{
		width: 180upx;
		height: 26upx;
		margin-top: 16upx;
		/* margin-right: 26upx; */
		float: right;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.jj image{
		width: 32upx;
		height: 32upx;
		margin-top: -20upx;
		padding: 20upx;
	}
	.jj text{
		font-size: 32upx;
		line-height: 30upx;
	}
	
	.renyuan-item-id{
		width: 448upx;
		font-size: 28upx;
		position: relative;
		padding-top: 20upx;
		border-bottom: rgba(246,246,246,1.00) solid 1upx;
		color: rgba(175,175,175,1.00);
		height: 200upx;
	}
	.renyuan-item-id image{
		margin-top: 88upx !important;	
		top: 0;
		right: 0;
		font-size: 21upx;
		position: absolute;
		color: #666666;
	}
	.renyuan-item-id:last-child{
		border-bottom: none;
	}
	.renyuan-name-id{
		width: 340upx;
		display: block;
		font-size: 30upx;
		line-height: 60upx;
		height: 60upx;
		color: rgba(51,51,51,1.00);
	}
	.renyuan-info-id{
		width: 340upx;
		display: block;
		font-size: 26upx;
		line-height: 60upx;
		height: 60upx;
		color: rgba(102,102,102,1.00);
	}
	.renyuan-tip-id{
		width: 340upx;
		display: block;
		font-size: 30upx;
		line-height: 120upx;
		height: 120upx;
		color: rgba(89,168,255,1.00);
	}
	
	.order-bottom{
		width: 750upx;
		height: 98upx;
		border-top: rgba(0,0,0,0.1) solid 1upx;
		position: fixed;
		z-index: 23;
		bottom: 0;
		background: #FFFFFF;
	}
/* 	.order-bottom .btn{
		float: right;
		width: 240upx;
		height: 98upx;
		border: none;
		text-align: center;
		line-height: 98upx;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 32upx;
		background: -webkit-linear-gradient(left, #FDBF1B,#FEBC1A);
		background: -o-linear-gradient(right, #FDBF1B,#FEBC1A);
		background: -moz-linear-gradient(right, #FDBF1B,#FEBC1A);
		background: linear-gradient(to right, #FDBF1B,#FEBC1A);
	} */
	.order-bottom .btn{
		float: right;
		width: 200upx;
		height: 98upx;
		border: none;
		text-align: center;
		line-height: 98upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: -webkit-linear-gradient(left, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.order-bottom .btn2{
		float: right;
		width: 200upx;
		height: 82upx;
		border: none;
		vertical-align: middle;
		text-align: center;
		padding-top: 16upx;
		line-height: 34upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: -webkit-linear-gradient(left, #a0d3ff,#b1c1ff);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #a0d3ff,#b1c1ff);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #a0d3ff,#b1c1ff);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #a0d3ff,#b1c1ff);
		/* 标准的语法 */
	}
	.sum{
		float: left;
		color: #E25115;
		font-size: 30upx;
		line-height: 98upx;
		margin-left: 40upx;
		height: 98upx;
	}
	.price{
		float: left;
		color: #E25115;
		font-size: 36upx;
		line-height: 98upx;
		height: 98upx;
		margin-right: 23upx;
	}
	.number{
		float: right;
		width: 146upx;
		height: 37upx;
		margin-right: 10upx;
		margin-top: 100upx;
		display: flex;
		flex-direction: row;
		text-align: center;
		line-height: 30upx;
	}
	.num{
		width: 58upx;
		height: 37upx;
		border-top: #999999 solid 1px;
		border-bottom: #999999 solid 1px;
		font-size: 28upx;
		line-height: 37upx;
	}
	.minus{
		width: 44upx;
		height: 37upx;
		border-radius: 10upx 0 0 10upx;
		border: #999999 solid 1px;
		color: #E25115;
		font-weight: bold;
	}
	.add{
		width: 44upx;
		height: 37upx;
		border-radius: 0 10upx 10upx 0;
		border: #999999 solid 1px;
		color: #E25115;
		font-weight: bold;
	}
	.amUnable{
		color: #999999;
	}
	.if-add-xc{
		width: 514upx;
		height: 246upx;
		border-radius: 20upx;
		background: #FFFFFF;
		position: fixed;
		top: 500upx;
		left: 118upx;
		text-align: center;
		z-index: 30;
	}
	.if-add-xc text{
		width: 100%;
		display: block;
		height: 40upx;
		margin-top: 73upx;
		font-size: 28upx;
	}
	.add-xc-bottom{
		width: 100%;
		height: 94upx;
		border-top: #E6E6E6 solid 1upx;
		position: absolute;
		bottom: 0;
	}
	.add-quxiao{
		width:257upx;
		height: 94upx;
		text-align: center;
		line-height: 94upx;
		color: #CCCCCC;
		float: left;
		font-size: 28upx;
	}
	.add-add{
		width:255upx;
		height: 94upx;
		text-align: center;
		line-height: 94upx;
		color: #55A0FF;
		float: right;
		font-size: 28upx;
		border-left: #E6E6E6 solid 1upx;
	}
	.renyuan-list{
		width: 360upx;
		margin-right: 50upx;
		float: left;
	}
	.renyuan-item{
		width: 448upx;
		font-size: 28upx;
		line-height: 100upx;
		color: rgba(175,175,175,1.00);
		height: 100upx;
		float: left;
	}
</style>
